<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">退货登记</el-breadcrumb-item>
      <el-breadcrumb-item>退货管理</el-breadcrumb-item>

      <el-breadcrumb-item>库房管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 分栏布局 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 输入框 -->
          <el-input placeholder="请输入任务单号" v-model="input" clearable @clear="getMissionList"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="getReturnMessage(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="missionList" v-loading="loading" style="width: 100%" max-height="410" border>
        <!-- <el-table-column fixed type="index" label="#" width="50"></el-table-column> -->
        <!-- 展开列 -->
        <el-table-column type="expand" width="51%">
          <template slot-scope="scope">
            <el-col v-for="(item,index) in scope.row.goodsVoList" :key="index" class="shopMessage">
              <div>
                <p>商品单号：{{scope.row.goodsVoList[index].commodityId}}</p>
                <p>商品名称：{{scope.row.goodsVoList[index].productName}}</p>
                <p>商品数量：{{scope.row.goodsVoList[index].amountOfGoods}}</p>
              </div>
            </el-col>

            <v-row></v-row>
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <el-table-column prop="id" label="任务单号" width="150"></el-table-column>
        <el-table-column prop="clientId" label="客户单号" width="130"></el-table-column>
        <el-table-column prop="userId" label="配送员代号" width="130"></el-table-column>

        <!-- <el-table-column label="商品单号" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].commodityId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].productName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsVoList.amountOfGoods" label="商品数量" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].amountOfGoods}}</span>
          </template>
        </el-table-column>-->

        <el-table-column prop="taskType" label="任务类型" width="120">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.taskType==2" type="danger">退货</el-tag>
            <el-tag v-show="scope.row.taskType==1" type="warning">换货</el-tag>
            <el-tag v-show="scope.row.taskType==0" type="success">送货收款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taskStatus" label="任务状态" width="120">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.taskStatus"
              :active-value="4"
              :inactive-value="-1"
              active-color="#F04134"
              active-text="已退货"
              inactive-color="#00A854"
              inactive-text="配送中"
              width="72"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="servicetimeInformation" label="服务时间信息" width="140"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-button type="success" @click="watchRow(scope.row)" size="mini">查看</el-button> -->
            <el-button
              type="danger"
              @click="showEditDialog(scope.row)"
              :disabled="isBtnVisible(scope.row)"
              size="mini"
            >确认退货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页的完整功能 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </div>

      <!-- 确认退货登记的对话框 -->
      <el-dialog title="退货登记" :visible.sync="returnDialogVisible" width="600px">
        <!-- 内容主题区域 -->
        <el-form :model="returnForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 45%;float:left; margin-left:-10px;height:250px">
            <el-form-item label="任务单号:" prop>
              {{ returnForm.id }}
              <!-- <el-input v-model="returnForm.id" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="客户单号:" prop>
              {{ returnForm.clientId }}
              <!-- <el-input v-model="returnForm.clientId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="配送员代号:" prop>
              {{ returnForm.userId }}
              <!-- <el-input v-model="returnForm.userId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="服务时间:" prop>
              {{ returnForm.servicetimeInformation }}
              <!-- <el-input v-model="returnForm.servicetimeInformation" disabled></el-input> -->
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 53%;float:right; margin-right:10px;height:250px">
            <el-scrollbar style="height:180px;" class="editScrollbar">
              <div
                v-for="(item,index) in returnForm.goodsVoList"
                :key="index"
                style="height:180px;"
              >
                <el-form-item label="商品单号:" prop>
                  {{ returnForm.goodsVoList[index].commodityId }}
                  <!-- <el-input v-model="returnForm.goodsVoList[index].commodityId" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品名称:" prop>
                  {{ returnForm.goodsVoList[index].productName }}
                  <!-- <el-input v-model="returnForm.goodsVoList[index].productName" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品数量:" prop>
                  {{ returnForm.goodsVoList[index].amountOfGoods }}
                  <!-- <el-input v-model="returnForm.goodsVoList[index].amountOfGoods" disabled></el-input> -->
                </el-form-item>
              </div>
            </el-scrollbar>
            <el-form-item label="退货日期:" prop>
              <el-input v-model="returnForm.date" disabled></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none">
          <el-button @click="returnDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="returnFormChange(returnForm)">确 定 退 货</el-button>
        </div>
      </el-dialog>

      <!-- 退货登记详情的对话框 -->
      <el-dialog title="退货单详情" :visible.sync="showFormVisible" width="800px">
        <!-- 内容主题区域 -->
        <el-form :model="showForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:250px">
            <el-form-item label="任务单号:" prop>
              <el-input v-model="showForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户单号:" prop>
              <el-input v-model="showForm.clientId" disabled></el-input>
            </el-form-item>
            <el-form-item label="配送员代号:" prop>
              <el-input v-model="showForm.userId" disabled></el-input>
            </el-form-item>
            <el-form-item label="服务时间信息:" prop>
              <el-input v-model="showForm.servicetimeInformation" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:250px">
            <el-form-item label="商品单号:" prop>
              <el-input v-model="showForm.commodityId" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop>
              <el-input v-model="showForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品数量:" prop>
              <el-input v-model="showForm.amountOfGoods" disabled></el-input>
            </el-form-item>
            <el-form-item label="退货日期:" prop>
              <el-input v-model="showForm.date" disabled></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none">
          <el-button type="primary" @click="showFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      loading: true,
      currentTime: new Date(), // 获取当前时间
      // 获取购货入库单列表的参数对象
      queryInfo: {
        id: "",
        // 当前页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
      },
      // 确认退货的参数对象
      queryInfoUpdate: {
        id: "",
      },
      // 退货任务单的列表数据
      missionList: [],
      total: 0,
      //表单模拟数据
      tableData: [
        {
          id: 1001,
          clientId: 1001,
          commodityId: 1001,
          productName: "太阳镜",
          amountOfGoods: 10,
          taskType: 2,
          taskStatus: -1,
          servicetimeInformation: "2020-8-20",
          createTime: "2020-8-21",
          updateTime: "2020-8-21",
        },
        {
          id: 1002,
          clientId: 1002,
          commodityId: 1001,
          productName: "帽子",
          amountOfGoods: 10,
          taskType: 1,
          taskStatus: -1,
          servicetimeInformation: "2020-8-20",
          createTime: "2020-8-21",
          updateTime: "2020-8-21",
        },
      ],
      // 控制退货登记的对话框的显示与隐藏
      returnDialogVisible: false,
      // 控制退货详情的对话框的显示与隐藏
      showFormVisible: false,
      // 展示确认退货登记的对话框的相关数据
      returnForm: {
        id: 0,
        clientId: 0,
        userId: 0,
        servicetimeInformation: "",
        commodityId: 0,
        productName: "",
        amountOfGoods: 0,
        date: "",
        goodsVoList: [],
      },
      // 展示退货单详情的对话框
      showForm: {
        id: 0,
        clientId: 0,
        userId: 0,
        servicetimeInformation: "",
        commodityId: 0,
        productName: "",
        amountOfGoods: 0,
        date: "",
      },
    };
  },
  created() {
    this.getMissionList();

    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    _this.currentTime = //修改数据date
      year +
      "-" +
      (month < 10 ? "0" + month : month) +
      "-" +
      (day < 10 ? "0" + day : day) +
      "" +
      " " +
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minutes < 10 ? "0" + minutes : minutes) +
      ":" +
      (second < 10 ? "0" + second : second);
  },
  methods: {
    // 返回列表数据
    async getMissionList() {
      this.queryInfo.id = "";
      this.loading = true;
      const _this = this;
      const { data: res } = await _this.$http.get(
        `/api/warehouse/getWarehousedVo?id=${this.queryInfo.id}&pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`
        // "/api/warehouse/getWarehousedVo",
        // {
        //   params: this.queryInfo,
        // }
        // this.queryInfo,
      );
      if (res.code !== 200) {
        return _this.$message.error(res.msg);
      }
      console.log(res.code);
      _this.missionList = res.data;
      _this.total = res.total;
      this.loading = false;
      // console.log(_this.total);
    },

    // 返回查询结果
    async getReturnMessage(input) {
      if (isNaN(input)) {
        return this.$message.error("只能输入数字");
      }

      if (Number(input) === 0) {
        this.getMissionList();
        return this.$message.success("所有数据获取成功");
      }

      this.queryInfo.id = input;
      this.loading = true;
      const { data: res } = await this.$http.get(
        "/api/warehouse/getWarehousedVo",
        {
          params: this.queryInfo,
        }
      );
      if (res.code !== 200) {
        this.$message.error(res.msg);
      }
      this.missionList = [];
      this.missionList = res.data;
      this.total = res.total;
      this.loading = false;
      console.log(this.missionList);
      console.log(this.queryInfo);
    },

    // 展示详情对话框
    watchRow(row) {
      console.log(row.id);
      this.showFormVisible = true;
      this.showForm.id = row.id;
      this.showForm.clientId = row.clientId;
      this.showForm.userId = row.userId;
      this.showForm.servicetimeInformation = row.servicetimeInformation;
      this.showForm.commodityId = row.goodsVoList[0].commodityId;
      this.showForm.productName = row.goodsVoList[0].productName;
      this.showForm.amountOfGoods = row.goodsVoList[0].amountOfGoods;
      this.returnForm.date = row.date;
      console.log(row.goodsVoList[0].productName);
    },
    // 展示编辑对话框
    showEditDialog(row) {
      console.log(row.id);
      this.returnDialogVisible = true;
      this.returnForm.id = row.id;
      this.returnForm.clientId = row.clientId;
      this.returnForm.userId = row.userId;
      this.returnForm.servicetimeInformation = row.servicetimeInformation;
      // this.returnForm.commodityId = row.goodsVoList[0].commodityId;
      // this.returnForm.productName = row.goodsVoList[0].productName;
      // this.returnForm.amountOfGoods = row.goodsVoList[0].amountOfGoods;
      this.returnForm.goodsVoList = row.goodsVoList;
      this.returnForm.date = this.currentTime;
      console.log(this.returnForm.date);
    },
    //  确认退货按钮的触发事件
    async returnFormChange(returnForm) {
      this.queryInfoUpdate.id = returnForm.id;
      const _this = this;
      const { data: res } = await _this.$http.get(
        `/api/warehouse/editWarehousedVo?id=${this.queryInfoUpdate.id}`,
        this.queryInfoUpdate
      );
      console.log(this.queryInfoUpdate);
      if (res.code == 200) {
        _this.$message(res.msg);
      }
      if (res.code !== 200) {
        _this.$message.error(res.msg);
      }
      this.returnDialogVisible = false;
      this.getMissionList();
    },

    // 监听 pagesize 改变事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getMissionList();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getMissionList();
    },

    // 如果按钮需要被禁用，则返回true，否则返回false
    isBtnVisible(row) {
      // 当任务状态为已退货(4),则该按钮被禁用
      if (row.taskStatus == 4) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style scoped>
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-card {
  margin-top: 20px;
  height: 552px;
}
.el-breadcrumb {
  margin-top: -25px;
  margin-bottom: 10px;
}
/* .el-pagination {
  position: fixed;
  bottom: 80px;
  right: 40px;
} */
</style>